<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use></svg></i
          ><span>预约挂号</span><span>&nbsp;</span>
        </div>
        <div class="buttom">
          <p>
            <span class="title1">选择宠物</span
            ><span class="title2"
              ><span class="padd"> 预约说明</span
              ><i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou1"></use></svg></i
            ></span>
          </p>
          <!-- {{ pet.length }} -->
          <nav>
            <section
              :class="
                register.chongwu == item.petsname ? 'petcard2' : 'petcard'
              "
              v-for="item in chongwus"
              :key="item.idnumber"
              @click="register.chongwu = item.petsname + ''"
            >
              <img :src="item.petsurl" alt="" />
              <section class="right">
                <p class="name">名字:{{ item.petsname }}</p>
                <p class="age">性别:{{ item.petssex == 1 ? "男" : "女" }}</p>
              </section>
            </section>
          </nav>
          <div v-show="register.chongwu == ''">
            <router-link to="/me">+</router-link>
          </div>
        </div>
      </div>
    </header>
    <div class="two">
      <div class="same">
        <p>预约项目</p>
        <nav>
          <section
            v-for="item in tab"
            :class="{ liang: item.name == tabs }"
            @click="tabs = item.name"
            :key="item.id"
          >
            {{ item.name }}
          </section>
        </nav>
      </div>
    </div>
    <div class="three">
      <div class="same">
        <p>预约日期</p>
        <nav>
          <section
            v-for="item in riqis"
            :class="{ liang: item === register.riqi }"
            @click="register.riqi = item"
            :key="item.id"
          >
            {{ item }}
          </section>
        </nav>
      </div>
    </div>
    <div class="four">
      <div class="same">
        <p>预约医生</p>
        <nav>
          <section
            v-for="item in doctorlists"
            :class="{ liang: item.doctorName == register.doctorId }"
            @click="register.doctorId = item.doctorName"
            :key="item.id"
          >
            <img
              src="https://img0.baidu.com/it/u=224081144,463462312&fm=26&fmt=auto"
              alt=""
            />
            <div class="name">{{ item.doctorName }}</div>
            <div class="rank">{{ item.doctorRank }}</div>
          </section>
        </nav>
      </div>
    </div>
    <div class="five">
      <div class="same">
        <p>预约时间</p>
        <nav>
          <section
            v-for="items in timers"
            :class="{ liang: items == register.time }"
            @click="register.time = items"
            :key="items.id"
          >
            {{ items }}
          </section>
        </nav>
      </div>
    </div>
    <div class="six">
      <div class="same">
        <p>预约备注</p>
        <input
          type="text"
          placeholder="可简单备注服务的内容，最多20字"
          v-model="text"
          maxlength="20"
        />
      </div>
      <!-- <h1>{{ text }}</h1> -->
    </div>
    <div class="seven">
      <div class="same">
        <div class="bottom">
          <div class="left">
            <p>
              <span>{{ register.year }}年&nbsp;{{ register.riqi }}</span>
              <span>&nbsp;{{ register.time }}</span>
            </p>
            <p>
              <span>{{ tabs }}</span>
              <span>{{ tabs == "疫苗" ? "" : prices }}</span>
            </p>
          </div>
          <div class="right"><button @click="tijiao">确认预约</button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
function beforeClose(action, done) {
  if (action === "confirm") {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    done();
  } else {
    done();
  }
}
import { Toast } from "vant";
import { Dialog } from "vant";
import { doctorlist } from "../../api/doctor";
import getriqi from "../../utils/getriqi";
import timer from "../../utils/timer";
import { selectpet } from "../../api/index";
import { registers } from "../../api/hospital";
import { selecthospitals } from "../../api/hospital";
export default {
  data() {
    return {
      prices: 10,
      text: "",
      tabs: "门诊",
      tab: [
        { id: 1, name: "门诊" },
        { id: 2, name: "绝育" },
        { id: 3, name: "疫苗" },
      ],
      pet: [],
      chongwus: [],
      timers: [],
      riqis: [],
      doctorlists: [],
      register: {
        hospitalId: "",
        chongwu: "",
        riqi: "",
        doctorId: null,
        time: "",
        message: "",
        year: "",
        price: null,
        tab: "",
        usersId: "",
      },
    };
  },
  methods: {
    // del(id) {
    //   this.register.chongwu = this.register.chongwu.filter(
    //     (item) => item.idnumber != id
    //   );
    // },
    getpets() {
      selectpet(this.$store.state.user.id).then((res) => {
        // console.log(res.data.data);
        this.chongwus = res.data.data;
        if (res.data.data.length != 0) {
          this.register.chongwu = res.data.data[0].petsname;
        }
      });
    },
    getdoctor() {
      // console.log(this.register.hospitalId);
      doctorlist().then((res) => {
        // console.log(res.data.data[0].doctorId);
        this.doctorlists = res.data.data.filter(
          (item) => item.hospitalId === Number(this.$route.params.id)
        );
        // console.log(this.doctorlists, "  this.doctorlists ");
        this.register.doctorId = this.doctorlists[0].doctorName;
      });
    },
    gethospitalName() {
      selecthospitals().then((res) => {
        // console.log(res.data.data, "rehospt");
        this.register.hospitalId = res.data.data.filter(
          (item) => this.$route.params.id == item.hospitalId
        )[0].hospitalName;
      });
    },
    tijiao() {
      if (this.$store.state.token) {
        Dialog.confirm({
          title: "预约说明",
          message: `<p>1、预约挂号需提前支付挂号费（不含医生诊费）<p/><p>2、点击确认预约后，请在15分钟内完成支付，过期未支付自动取消订单<p/><p>3、距到店3小时可以取消预约，取消挂号后挂号费自动退回账户<p/><p>4、为保障服务质量请您提前30分钟到店，逾期需根据门店实际接待情况排队等候</p><p></p>`,
          beforeClose,
        })
          .then(() => {
            // on confirm
            this.register.usersId = this.$store.state.user.id;
            this.register.tab = this.tabs;
            this.register.message = this.text;
            this.register.price = this.tabs != "疫苗" ? 10 : 0;
            registers(this.register).then((res) => {
              // console.log(res);
              setTimeout(() => {
                this.$router.push("/Registerlist");
              }, 2020);
            });
          })
          .catch(() => {
            // on cancel
          });

        // console.log(this.register);
      } else {
        this.$router.push("/login");
      }
    },
    gettimer() {
      this.timers = timer();
      this.register.time = this.timers[0];
      // console.log(this.timers);
    },
    getri() {
      this.riqis = getriqi();
      this.register.riqi = this.riqis[0];
      // console.log(this.register);
    },
    goto() {
      this.$router.go(-1);
    },
    getyear() {
      this.register.year = new Date().getFullYear();
    },
  },
  created() {
    this.getpets();
    this.getyear();
    this.getdoctor();
    this.getri();
    this.gettimer();
    this.gethospitalName();
    // this.jianc();
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: #f7f7f7;
}
header {
  background: #fff;
  .header {
    font-size: 4.7vw;
    display: flex;
    justify-content: space-between;
    padding: 3vh;
    align-items: center;
    i {
      transform: rotate(180deg);
    }
  }
  .buttom {
    padding: 3vw 0;
    p {
      display: flex;
      justify-content: space-between;
      .title2 {
        color: #31d192;
        font-size: 3.5vw;
      }
      .padd {
        padding-right: 2vw;
      }
    }
    nav {
      .liang {
        border: 0;
        color: #fff;
        background: #31d192;
      }
      display: flex;
      overflow: auto;
      .petcard {
        border: 1px solid #ccc;
        margin-right: 2vw;
        color: #31d192;
        border-radius: 2.5vw;
        padding: 2vw;
        margin-top: 2vw;
        width: 35%;
        background: #fff;
        font-size: 1vw;
        display: flex;
        align-items: center;
        img {
          width: 10vw;
          height: 10vw;
          border-radius: 50%;
        }
        .right {
          padding-left: 2vw;
          .name {
            display: inline-block;
            width: 15vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .petcard2 {
        border: 1px solid #ccc;
        margin-right: 2vw;
        color: #fff;
        border-radius: 2.5vw;
        padding: 2vw;
        margin-top: 2vw;
        width: 35%;
        background: #31d192;
        font-size: 1vw;
        display: flex;
        align-items: center;
        img {
          width: 10vw;
          height: 10vw;
          border-radius: 50%;
        }
        .right {
          padding-left: 2vw;
          .name {
            display: inline-block;
            width: 15vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    div {
      a {
        color: #31d192;
      }
      margin-top: 4vw;
      background: rgba(125, 255, 201, 0.164);
      color: #31d192;
      text-align: center;
      width: 10vw;
      font-size: 8vw;
      border-radius: 50%;
      border: 0;
      margin-bottom: 7vw;
    }
  }
}
.two {
  .liang {
    // border: 1px solid #5fe687;
    background: #31d192;
    color: #fff;
  }
  margin-top: 2vw;
  background: #fff;
  padding: 3vw;
  p {
    font-size: 4vw;
    padding: 2vw 0;
  }
  nav {
    display: flex;
    section {
      border: 1px solid #ccc;
      padding: 1vw 5vw;
      font-size: 4vw;
      margin-right: 3vw;
      border-radius: 2vw;
      margin-bottom: 2vw;
    }
  }
}
.three {
  .liang {
    background: #31d192;
    color: #fff;
    border: 1px solid #31d192;
  }
  margin-top: 2vw;
  background: #fff;
  padding: 3vw;
  p {
    font-size: 4vw;
    padding: 2vw 0;
  }
  nav {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    section {
      border: 1px solid #ccc;
      padding: 5vw;
      width: 20vw;
      font-size: 1vw;
      margin-right: 3vw;
      border-radius: 2vw;
      margin-bottom: 2vw;
    }
  }
}
.four {
  .liang {
    border: #5fe687 1px solid;
  }
  margin-top: 2vw;
  background: #fff;
  padding: 3vw;
  p {
    font-size: 4vw;
    padding: 2vw 0;
  }
  nav {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    section {
      border: transparent 1px solid;
      text-align: center;
      font-size: 4vw;
      margin-right: 3vw;
      border-radius: 2vw;
      margin-bottom: 2vw;
      img {
        width: 25vw;
      }
      .name {
        font-size: 3.8vw;
      }
      .rank {
        font-size: 3.5vw;
      }
    }
  }
}
.five {
  .liang {
    background: #31d192;
    color: #fff;
    border: 1px solid #31d192;
  }
  margin-top: 2vw;
  background: #fff;
  padding: 3vw;
  p {
    font-size: 4vw;
    padding: 2vw 0;
  }
  nav {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    section {
      border: 1px solid #ccc;
      border-radius: 4vw;
      padding: 1vw;
      font-size: 2vw;
      margin-right: 2vw;
    }
  }
}
.six {
  margin-top: 2vw;
  background: #fff;
  padding: 3vw;
  margin-bottom: 20vw;
  p {
    font-size: 4vw;
    padding: 2vw 0;
  }
  input {
    width: 94%;
    border: 0;
    background: rgb(243, 243, 243);
    padding: 2.5vw;
    font-size: 3.8vw;
    border-radius: 2vw;
  }
}
.seven {
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 3vw 0;
  position: fixed;
  bottom: 0;
  background: #fff;
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .left {
    font-size: 3.5vw;
    // background: forestgreen;
    width: 40%;
  }
  .right button {
    background: rgb(59, 175, 104);
    padding: 2vw 8vw;
    border: 0;
    color: #fff;
    border-radius: 5vw;
  }
}
</style>